<template>
  <div ref="scroll-wrapper">
    <slot></slot>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'

export default {
  name: 'IshopScroll',
  props:{
    // 1. probeType 为 0，在任何时候都不派发 scroll 事件，
    // 2. probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
    // 3. probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
    // 4. probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
    probeType:{
      type: Number,
      default: 0
    },
    pullUpLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scroll: {}
    };
  },
  watch:{
    probeType: function (newValue) {
      console.log('watch probeType',newValue);
    },
    pullUpLoad: function (newValue) {
      console.log('watch pullUpLoad',newValue);
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs['scroll-wrapper'], {
        click: true,
        probeType: this.probeType,
        pullUpLoad: true
        // movable: true,
        // zoom: true
    })
    this.scroll.on('beforeScrollStart', ()=>{
        this.scroll.refresh()
    })
    this.scroll.on('scroll', (position) => {
      this.$emit('scroll', position)
    })
    this.scroll.on('pullingUp', () => {
      this.$emit('pullingUp')
    })
    setTimeout(() => {
      this.scroll.refresh()
    }, 1000);
  },
  updated() {
  },
  methods: {
    refresh() {
      this.scroll.refresh()
    },
    finishPullUp() {
		  this.scroll.finishPullUp()
    },
    scrollTo(x, y, time = 300) {
		  this.scroll.scrollTo(x, y, time)
    }
  },
};
</script>

<style scoped>

</style>